<template>
	<div>
		<div class="search-box">
			<input 
			v-model='inputKey'
			class="search-input" 
			type="text" 
			placeholder="请输入城市名或者拼音">
		</div>
		<div class="result" ref="search" v-show='inputKey'>
			<ul class="result-list">
				<li class="result-item" v-for='item of list' :key = item.id>{{item.name}}</li>
				<li class="result-item active" v-show='notExist'>对不起，没有找到相关地点</li>
			</ul>
		</div>
	</div>
</template>
<script>
	import Bscroll from 'better-scroll'
	export default{
		name:'CitySearch',
		props:{
			cities:{
				type:Object
			}
		},
		data(){
			return {
				inputKey:'',
				list:[],
				timer:null
			}
		},
		mounted(){
			this.scroll = new Bscroll(this.$refs.search)
		},
		computed:{
			notExist(){
				return !this.list.length
			}
		},
		watch:{
			inputKey(){
				if(this.timer){
					clearTimeout(this.timer)
				}
				if(!this.inputKey){
					this.list = []
					return
				}
				this.timer = setTimeout(()=>{
					const result = []
					for(let i in this.cities){
						this.cities[i].forEach((value)=>{
							if(value.spell.indexOf(this.inputKey)>-1||value.name.indexOf(this.inputKey)>-1){
								result.push(value)
							}
						})
					}
						this.list = result
				},100)
			}
		}
	}
</script>
<style scoped lang="stylus">
@import '~@/assets/styles/global.styl'
	.search-box{
		position: relative;
		height: .72rem;
	    background-color: $bgColor;
	    padding: 0 .1rem;
	    color: #fff;
	}
	.search-input{
		position: absolute;
		box-sizing: border-box;
		padding: 0 .1rem;
		left: .1rem;
		top: 0
		height: .62rem;
		width: 96%;
		line-height: .62rem;
		text-align: center;
		border-radius: .1rem;
		border: 0;
		color: #666;
	}
	.result{
		position: absolute;
		z-index: 3;
		top: 1.35rem;
		left: 0;
		bottom: 0;
		right: 0;
		font-size: .32rem;
		background-color: #eee;
	}
	.result-item{
		height: .8rem;
		line-height: .8rem;
		border-bottom: 1px solid #999;
		background-color: #fff
	}
	.result-item.active{
		color: red;
	}
</style>